<!--
 * @Author: ac98l
 * @Date: 2023-03-08 11:24:40
 * @LastEditors: ac98l
 * @LastEditTime: 2023-03-08 14:29:12
 * @Description: 
-->
<template>
  <div class="app-container">
    <!-- 顶部按钮区域开始 -->
    <el-form ref="queryForm" inline label-width="68px">
      <el-form-item>
        <el-button @click="addGoods" icon="el-icon-plus" size="mini" type="success">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="boxList" border style="width: 100%">
      <el-table-column prop="boxName" label="餐盒名称" width="180">
      </el-table-column>
      <el-table-column prop="boxSize" label="餐盒型号" width="180">
      </el-table-column>
      <el-table-column  label="餐盒单价">
        <template slot-scope="scoped">
          {{ scoped.row.price }} 元
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="handleClose">
      <el-form label-position="top" label-width="80px" :model="formLabelAlign">
        <el-form-item label="餐盒名称">
          <el-input v-model="formLabelAlign.boxName"></el-input>
        </el-form-item>
        <el-form-item label="餐盒型号">
          <el-input v-model="formLabelAlign.boxSize"></el-input>
        </el-form-item>
        <el-form-item label="餐盒单价">
          <el-input-number v-model="formLabelAlign.price" :precision="2" :step="0.1" :max="20"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getBoxList, addBox } from "@/api/goods"
export default {
  data() {
    return {
      boxList: [],
      formLabelAlign: {
        boxName: undefined,
        price: 1,
        boxSize: undefined
      },
      dialogVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getBoxList().then(res => {
      this.boxList = res.data
    })
    },
    addGoods() {
      this.dialogVisible = true
    },
    resetForm() {
      this.formLabelAlign = {
        boxName: undefined,
        price: 1,
        boxSize: undefined
      }
    },
    handleClose() {
      this.resetForm()
    },
    submit() {
      addBox(this.formLabelAlign).then(res => {
        this.$modal.msgSuccess('新增成功')
        this.dialogVisible = false
        this.getList()
      })
    }
  }
}
</script>